<template>
  <div class="adeSta">
    <div class="adeSta-title">员工考勤统计</div>
    <div class="block">
      <span class="demonstration">输入时间段：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <hr>
    <div>
        <span>机构：</span>
        <el-select v-model="value2" placeholder="请选择">
            <el-option
            v-for="item in cities"
            :key="item.value"
            :value="item.value"
            >
            <span style="float: left">{{ item.value }}</span>
            </el-option>
        </el-select>
        <span>部门：</span>
        <el-select v-model="value3" placeholder="请选择">
            <el-option
            v-for="item in cities"
            :key="item.value"
            :value="item.value"
            >
            <span style="float: left">{{ item.value }}</span>
            </el-option>
        </el-select>
        <!-- 获取时间段，机构，部门信息发送请求传递数据，渲染返回的数据值 -->
        <el-button type="primary" @click="handleAtt" plain>统计</el-button>
        <el-button type="primary" plain>导出Excel打印</el-button>
        
    </div>
    <!-- 子组件渲染统计记录 -->
    <AdeStaList v-show="active"></AdeStaList>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AdeStaList from './adeList/AdeStaList.vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const cities = [
  {value: '研究院',},
  {value: '科技院',},
  {value: 'Nanjing',},
  {value: 'Chengdu',},
  {value: 'Shenzhen',},
  {value: 'Guangzhou',},
]
const active = ref(false)

function handleAtt() {
  active.value = true
  // 拿到三个数据的值
  console.log(value1)
  console.log(value2)
  console.log(value3)
}

</script>

<style scoped>
    .adeSta-title{
       height:40px;
       width:100%;
       text-align:center;
    }
</style>
